<template>
	<view class="nav-bottom-bg">
		<view class="nav-top-bg">
			<u-navbar :isBack="false" title-size="34" back-icon-color="#292940" title-color="#292940" :is-back="false" :border-bottom="false" placeholder>
			</u-navbar>
			<div class="padding-72">
				<view class="text-292940 family-cn fz-44 text-center">完善个人信息</view>
				<view class="text-center fz-26 text-999BA8 mt-2">添加头像、昵称有利于提升你的魅力值哦！</view>
			</div>
		</view>
		<view class="box">
			<view class="upload-avatar" @click="uploadAvatar">
				<image v-if="avatarImg" class="w-100 h-100 cricel-img" :src="avatarImg" mode="aspectFill" ></image>
				<image v-else class="photo" src="/static/setting/avatar-icon.png" mode="aspectFill"></image>
				<image class="avatar-edit" src="/static/setting/avatar-edit.png" ></image>
			</view>
				
			<u-form>
				<u-form-item label="昵称" :label-style="labelStyle">
					<u-input v-model.trim="nickname" :border="false" placeholder="请输入昵称" placeholderStyle="color:#CCCDD1,size:32upx" clearable  />
				</u-form-item>
			</u-form>	
			<u-button type="default" :loading="loading" class="main-bg family-sc fz-36" @tap="save">保存</u-button>
		</view>
	</view>
</template>

<script>
	import ossUpload from '@/common/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				nickname:'',
				avatarImg:'',
				loading:false,
				labelStyle:{
					color:'#292940',
					size:'16px'
				}
			}
		},
		computed: {
			USER() {
				return this.$store.state.auth.USER
			}
		},
		methods: {
			//修改头像
			uploadAvatar(){
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (tempRes) => {
						let fileType = ''
						let blobUrl = ''
						// #ifdef H5
						//网页端获取文件类型
						fileType = tempRes.tempFiles[0].name.substring(tempRes.tempFiles[0].name.lastIndexOf(".") + 1);
						// #endif
						//获取上传文件blob地址
						blobUrl = tempRes.tempFilePaths[0]
						ossUpload(blobUrl, fileType, result => {
							this.avatarImg = result
						})
					}
				})
			},
			save() {
				if(this.avatarImg == ''){
					return uni.$u.toast('请上传头像')
				}
				if(this.nickname == ''){
					return uni.$u.toast('请输入昵称')
				}
				this.loading = true
				this.$store.dispatch('user/userUpdate', {nickname:this.nickname,avatar:this.avatarImg}).then(res => {
					this.loading = false
					uni.$u.toast('修改成功')
					this.$store.dispatch('auth/user').then(res => {
						let canNavBack = getCurrentPages();
						if (canNavBack && canNavBack.length > 1) {
							uni.navigateBack({
								delta: 1
							});
						} else {
							uni.switchTab({
								url:'/pages/tabBars/mine'
							})
						}
					})
				}).catch(error=>{
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bottom-bg {
		width: 100%;
		height: 100vh;
	}

	.padding-72 {
		padding-top: 72upx;
		padding-bottom: 103upx;
	}
	.upload-avatar{
		width: 200upx;
		height: 200upx;
		border-radius: 100%;
		margin-bottom: 60upx;
		background: #FFFFFF;
		position: relative;
		left:50%;
		transform: translateX(-50%);
		.photo{
			width: 200upx;
			height: 200upx;
		}
		.avatar-edit{
			width: 44upx;
			height: 44upx;
			left:150upx;
			top:-50upx;
			
		}
	}
	.box{
		padding: 0 30upx;
		button {
			width: 100%;
			height: 98upx;
			border-radius: 50upx;
			line-height: 98upx;
			font-size: 32upx;
			color: #FFFFFF;
			margin-top: 60upx;
			margin-bottom: 34upx;
		
		}
		
		uni-button:after {
			border: none !important;
		}
		/deep/.u-form-item{
			padding: 9px 0 4px 0 !important;
		}
	}
</style>
